// import Child from './routerTest/Child'
import Root from './routerTest/Root'
import React from 'react'

const Async = (Component) => {
  const LazyComponent = React.lazy(Component);
  return class App extends React.PureComponent {
    render() {
      return (
          <React.Suspense fallback={<div>Loading...</div>}>
            <LazyComponent {...this.props}/>
          </React.Suspense>
      )
    }
  }
};

const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Async(() => import( /*webpackChunkName:'Home'*/'./routerTest/Home'))
      },
      {
        path: "/child/:id",
        component: Async(() => import( /*webpackChunkName:'Child'*/'./routerTest/Child')),
        routes: [
          {
            path: "/child/:id/grand-child",
            component: Async(() => import(/*webpackChunkName:'GrandChild'*/ './routerTest/GrandChild'))
          },
          {
            path: "/child/:id/grand-child1",
            component: Async(() => import( /*webpackChunkName:'GrandChild1'*/'./routerTest/GrandChild1'))
          },
          {
            path: "/child/:id/grand-child2",
            component: Async(() => import(/*webpackChunkName:'GrandChild2'*/ './routerTest/GrandChild2'))
          }, {
            path: "/child/:id/RouterTestHook",
            component: Async(() => import(/*webpackChunkName:'RouterTestHook'*/ './routerTest/RouterTestHook'))
          }, {
            path: "/child/count",
            component: Async(() => import(/*webpackChunkName:'count'*/ './redux/count'))
          }, {
            path: "/child/counthook",
            component: Async(() => import(/*webpackChunkName:'count'*/ './redux/counthook'))
          }
        ]
      }
    ]
  }
];

export default routes
